<template>
    <div class="gantt" id="gantt" 
        style="border-top-width: 0px;
            border-right-width: 0px;
            border-left-width: 0px;
            border-bottom-width: 0px;
            margin-top: 5px;
            margin-bottom: 5px;">
    </div>
</template>
<script>
export default {
    name: 'Gantt',
    props: {
        source: [Array]
    },
    data () {
        return {

        }
    },
    methods: {
        render_gantt: function(source) {
            /* eslint-disable */
            $("#gantt").gantt({
            source: source,
            navigate: 'scroll',//buttons  scroll
            scale: "days",// months  weeks days  hours
            maxScale: "months",
            minScale: "days",
            itemsPerPage: 10,
            onItemClick: function (data) {
                console.log("Item clicked - show some details");
            },
            onAddClick: function (dt, rowId) {
                console.log("Empty space clicked - add an item!");
            },
            onRender: function () {
                if (window.console && typeof console.log === "function") {
                    console.log("chart rendered");
                }
            }
        });
        }
    },
    watch: {
        source: function() {
            if (this.source.length != 0) {
                this.render_gantt(this.source)
            }
            
        }
    },
    mounted: function() {
    }
}
</script>
